<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>TabBar Test Page</title>
<script src="dollar.js"></script>
<style>
	#main{
		width: 400px;
	}
	#tab-title-cnt{
		height:21px;
		border-bottom:1px solid #000;
	}
	.tab-title{
		float:left;
		height:20px;
		width:98px;
		border:1px solid #000;
		border-bottom:none;
		background:#ccc;
	}
	#tab-title-cnt .on{
		background:#fff;
	}
	.tab-content{
		height:200px;
		border:1px solid #ccc;
		background:#efefef;
	}
</style>
<script>
var SimpleTabView = $({
	__init : function (sets) {
		sets = $.extend({
			defaultShowIndex : 0,
			activeClass : 'on'
		}, sets);
		var $titles = sets.$titles, $contents = sets.$contents, currentIndex = sets.defaultShowIndex, activeClass = sets.activeClass;
		function clickHandler (index) {
			$titles.$(currentIndex, '$class', '-' +  activeClass);
			$titles.$(index, '$class', '+' + activeClass);
			$contents.$(currentIndex, '$hide');
			$contents.$(index, '$show');
			currentIndex = index;	
		}
		$titles.each(function (e, i) {
			$(e).click(clickHandler.bind(null, i));	
		});
	}	
});
$(function () {
	new SimpleTabView({
		$titles : $('#tab-title-cnt .tab-title'),
		$contents: $('#tab-content-cnt .tab-content')	
	});	
});
</script>
</head>
<body>
	<div id="main">
		<div id="tab-title-cnt">
			<div class="tab-title on">标签1</div>
			<div class="tab-title">标签2</div>
			<div class="tab-title">标签3</div>
			<div class="tab-title">标签4</div>
		</div>
		<div id="tab-content-cnt">
			<div class="tab-content">内容1</div>
			<div class="tab-content" style="display:none">内容2</div>
			<div class="tab-content" style="display:none">内容3</div>
			<div class="tab-content" style="display:none">内容4</div>
		</div>
	</div>
</body>
</html>